<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>葡萄藤PPT</title>
    
    <link rel="stylesheet" href="../css/reveal/reveal.css">
    
    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">
    
    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">
    
    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <style>
        .reveal pre code {
            background-color: #120;
        }
        p{
            font-size: 30px!important;
            letter-spacing: 2px;
            line-height: 50px!important;
            text-indent:2em;
            text-align: left;
        }
        a{
            color: #fff!important;
        }
        B{
            text-align: center;
        }
    </style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h3>【js-08】</h3>
            <h3>主题：如何理解angular自定义指令directive的scope属性？</h3>
            <h4>小课堂【上海第31期】</h4>
            分享人：姚磊
        </section>
        <section style="line-height: 70px;">
            目录<br>

            1.背景介绍<br>

            2.知识剖析<br>

            3.常见问题<br>

            4.解决方案<br>

            5.编码实战<br>

            6.扩展思考<br>

            7.参考文献<br>

            8.更多讨论<br>
        </section>

        <section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section>
                <p>在AngularJS中，除了内置指令如ng-click等，我们还可以自定义指令。自定义指令，是为了扩展DOM元素的功能。代码中，通过指定directive中的restrict属性，来决定这个指令是作为标签（E）、属性（A）、属性值（C）、还是注释（M）。指令的定义过程就不详述了，今天小课堂主要是讲关于scope属性取值的区别。
                </p>
            </section>
        </section>
        <section>
            <section>
                <h3>2.知识剖析</h3>
            </section>
            <section>
                <p>$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中。
                </p>
            </section>
            <section>
                <B>2.1 $scope 的作用</B>
                <p> $scope 对象在 AngularJS 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和 Controller 之间可以友好的通讯.
                </p>
            </section>
            <section style="width: 110%">
                <B>2.2 scope属性的3种取值</B>
                <p>①、false（默认值）：直接使用父scope。</p>
                <p>②、true：继承父scope但是并不在继承链上。</p>
                <p>③、对象{ }：创建一个新的“隔离”scope，但仍可与父scope通信。隔离的scope，通常用于创建可复用的指令，也就是它不用管父scope中的model。然而虽然说是“隔离”，但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种：&、=、@。</p>
            </section>
        </section>
        <section>
            <section>
                <h3>3.常见问题</h3>
            </section>
        </section>
        <section>
            <B>scope属性的3种取值对指令有什么影响?</B>
        </section>
        <section>
            <section>
                <h3>4.解决方案</h3>
            </section>
            <section>
                <p>每当一个指令被创建的时候，都会有这样一个选择，是继承自己的父作用域（一般是外部的Controller提供的作用域或者根作用域（$rootScope）），还是创建一个新的自己的作用域，当然AngularJS为我们指令的scope参数提供了三种选择，分别是：false,true,{}；默认情况下是false。</p>
            </section>
            <section>
                <B>4.1 scope : false。</B>
                <p>首先我们来看一下，当scope参数被设置为false时有什么情况发生。在这种情况下，在指令模板中可以直接使用controller中的$scope，函数。首先我们来创建一个指令，代码如下所示：<a href="../demo/js-08-Understand-AngularJs-directive-scope/demo1.html" target="_blank">demo1</a></p>
                <pre>
                    <code>
                        angular.module("MyApp", [])
                        .controller("MyController", function ($scope) {
                        $scope.name = "Bill";
                        $scope.age = 20;
                        $scope.changeAge = function () {
                        $scope.name = 22;
                        }
                        })
                        .directive("myDirective", function () {
                        return {
                        restrict: "AE",
                        scope: false,
                        replace: true,
                        template: "<div class='my-directive'>"
                        "自定义指令scope"
                        "我的名字是：'<span ng-bind='name'></span><br/>'"
                        "我的年龄是：<span ng-bind='age'></span><br/>"
                        "在这里修改名字：<input type='text' ng-model='name'>"
                        " </div>"
                        };
                        });
                    </code>
                </pre>
            </section>
            <section>
                <p>因为我们将scope的属性设置为false所以，我们创建的指令获得了父作用域的一切属性和方法，这也使得在指令的模板中我们可以使用这些属性和方法。</p>
                <p>注意：此时我们在输入框里改变名字，会发现上面的两个名字都发生了变化，因为两者共用一个scope，所以任意一方的修改都会影响另一方。</p>
            </section>
            <section>
                <B>4.2 scope : true。</B>
                <p>
                    当把scope属性设置为true时，这表明我们创建的指令要创建一个新的子作用域，这个作用域继承自父作用域(指令所属controller)。
                </p>
                <p>
                    修改上面的JS代码，将指令中的：scope:false修改为scope:true &emsp;<a href="../demo/js-08-Understand-AngularJs-directive-scope/demo2.html" target="_blank">demo2</a>
                </p>
                <p>然后我们再试着在我们的input输入框中写一些字符串，会发现，指令中的那个name发生了变化，但是指令外的那个name却没有发生变化，这说明了一个问题。</p>
            </section>
            <section>
                <p>Angular中的scope继承特性和原型继承是一样的，当scope:true时，生成一个子作用域，初始化时，子作用域中没有name这个属性，所以向上查找，找到父作用域中的name属性，然后把值渲染到界面上；而当在子作用域中做出修改时，会在子作用域中生成一个同名的属性，这时，当name属性值变化时，就不会向上查找了，也就是绑定的name属性就不是同一个了，两者自此互不干扰了。</p>
            </section>
            <section>
                <B>4.3 scope : {}</B>
                <P>当我们将scope的属性设置为{}时，我们可以做更多的事情。</P>
                <p>
                    AngularJS自定义指令是其核心功能，良好的可复用性，放在其他地方也可以使用；而良好的可复用性则需要低耦合，而我们将scope设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，减少甚至不依赖外部环境。
                </p>
                <p>当然首先我们还是要给出我们的例子，先看代码,我们修改了上述的JS代码和HTML代码 JS代码：<a href="../demo/js-08-Understand-AngularJs-directive-scope/demo3.html" target="_blank">demo3</a></p>
            </section>
            <section>
                <pre>
                    <code>
        angular.module("MyApp", [])
        .controller("MyController", function ($scope) {
        $scope.name = "Bill";
        $scope.age = 20;
        $scope.changeAge = function(){
            $scope.age = 0;
        }
    })
        .directive("myDirective", function () {
        return {
            restrict: "AE",
            scope: {
                name: '@myName',
                age: '=',
                changeAge: '&changeMyAge'
            },
            replace: true,
            template: "<div class='my-directive'>" +
                "<h5>下面部分是我们创建的指令生成的</h5>" +
                "我的名字是：<span ng-bind='name'></span><br/>" +
                "我的年龄是：<span ng-bind='age'></span><br/>" +
                "在这里修改名字：<input type='text' ng-model='name'><br/>" +
                "<button ng-click='changeAge()'>修改年龄</button>" +
                " </div>"
        }
    });
                    </code>
                </pre>
            </section>
            <section style="text-align: left">
                <p>我们使用了隔离的作用域，不代表我们不可以使用父作用域的属性和方法。</p>
                <p>我们可以通过向scope的{}中传入特殊的前缀标识符（即prefix），来进行数据的绑定。</p>
                <p>在创建了隔离的作用域，我们可以通过@,&,=引用应用指令的元素的属性，如上面的代码那样，我们可以在< div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()">< /div>这个元素中，利用前缀标识符通过使用属性name,age,change-age来引用这些属性的值。</p>
            </section>
            <section>
                <p >下面我们来看看如何使用这些前缀标识符：</p>
                <p>1.@：单向绑定，外部scope能够影响内部scope，但反过来不成立；</p>
                <p>这是一个单项绑定的前缀标识符。使用方法：在元素中使用属性，好比这样</p>
                <pre>
                <code>
                    < div my-directive name="{{name}}">< /div>
                </code>
                </pre>
                <p>注意，只能单向绑定父作用域中的值。</p>
            </section>
            <section  style="text-align: left">
                <p>2、=：双向绑定，外部scope和内部scope的属性相互绑定；</p>
                <pre>
                <code>
                    < div my-directive age="age">< /div>
                </code>
                </pre>
                <p>注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。</p>
                <p><a href="../demo/js-08-Understand-AngularJs-directive-scope/demo3.2.html" target="_blank">demo3.2</a></p>
            </section>
            <section  style="text-align: left">
                <p>3、&：把内部scope的函数的返回值和外部scope的任何属性绑定起来。</p>
                <p>这是一个绑定函数方法的前缀标识符。使用方法：在元素中使用属性，好比这样</p>
                <pre>
                    <code>
                        < div my-directive change-age="changeAge()">< /div>
                    </code>
                </pre>
                <p>注意，属性的名字要用-将多个个单词连接。</p>
            </section>
            <section>
                注意：在新创建指令的作用域对象中，使用属性的名字进行绑定时，要使用驼峰命名标准，比如下面的代码。
                <pre>
                    <code>
    scope: {
        // `myName` 就是原来元素中的`my-name`属性
        name: '@myName',
        age: '=',
        // `changeMyAge`就是原来元素中的`chang-age`属性
        changeAge: '&changeMyAge'
    }
                    </code>
                </pre>
            </section>
        </section>

        <section>
            <section>
                <h3>5.编码实战</h3>
            </section>
        </section>
        <section>
            <section>
                <h3>6.扩展思考</h3>
            </section>
            <section>
                <p>我们的指令是如何利用这些前缀标识符来寻找我们想要的属性或者函数的？</p>
            </section>
            <section>
                <p>@ 当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}，然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。</p>
                <p>=和&与@差不多，只不过=进行的是双向的数据绑定，不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变，而&是绑定函数而已。</p>
            </section>
        </section>
        <section>
            <section>
                <h3>7.参考文献</h3>
            </section>
            <section>
                <p>参考一：<a href="https://segmentfault.com/a/1190000002773689" target="_blank" >AngularJS 指令的 Scope (作用域)</a></p>
                <p>参考二：<a href="https://segmentfault.com/a/1190000002773689" target="_blank">一招制敌 - 玩转 AngularJS 指令的 Scope (作用域)</a></p>
            </section>
        </section>
        <section>
            <section>
                <h3>8.更多讨论</h3>
            </section>

        </section>
        <section>
            <h4>鸣谢</h4>
            <h4>感谢大家观看</h4>
            <small>BY : 姚磊</small>
            <small>感谢 : 陈中彬师兄</small>
        </section>
    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>

<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>
</body>
</html>
